<template>
    <div class="box">
        <!-- <hr />
        <van-grid direction="horizontal" :column-num="3" :border="false">
            <van-grid-item icon="chat-o" text="评论" />
            <van-grid-item icon="share-o" text="分享" @click="showPopup1" />
            <van-grid-item icon="delete-o" text="删除" @click="fn1" />
        </van-grid>
        <hr />
        <van-popup v-model:show="show1" position="bottom" :style="{ height: '30%' }" round>
            <van-cell title="QQ" icon="smile-comment-o" />
            <van-cell title="微信" icon="comment-circle-o" />
            <van-cell title="微博" icon="browsing-history-o" />
            <van-cell title="其他" icon="link-o" />
        </van-popup> -->

        <van-nav-bar title="歌单列表" left-text="收起" left-arrow @click-left="onClickLeft()" />
        <van-swipe :loop="false" :show-indicators="false" >
            <van-swipe-item class="songSteet">
                <h2>收藏的歌单</h2>
                <van-list>
                    <van-cell v-for="item, index in userCreateSteet" :key="index" @click="toSteetDetail(item.id)">
                        <!-- <span class="listNum">{{ index + 1 }}</span> -->
                        <van-image width="30" height="30" :radius="10" :src="item.coverImgUrl"></van-image>
                        {{ item.name }}
                        <van-icon class="more" name="ellipsis" @click="show = true" />
                        <van-action-sheet v-model:show="show" @select="onSelect">
                            <div class="songCart">
                                <van-image width="40" height="40" :src="item.url" />&nbsp;&nbsp;
                                <span>歌单：{{ item.name }}</span>
                            </div>
                            <van-list>
                                <van-cell>
                                    <van-icon name="down" />&nbsp;&nbsp;&nbsp;下载
                                </van-cell>
                                <van-cell>
                                    <van-icon name="share-o" />&nbsp;&nbsp;&nbsp;分享
                                </van-cell>
                                <van-cell>
                                    <van-icon name="warning-o" />&nbsp;&nbsp;&nbsp;删除
                                </van-cell>
                            </van-list>
                        </van-action-sheet>
                    </van-cell>
                </van-list>
            </van-swipe-item>
            <van-swipe-item class="songSteet">
                <h2>创建的歌单</h2>
                <van-list>
                    <van-cell v-for="item, index in userGetSteet" :key="index" @click="toSteetDetail(item.id)">
                        <!-- <span class="listNum">{{ index + 1 }}</span> -->
                        <van-image width="30" height="30" :radius="10" :src="item.url"></van-image>
                        {{ item.name }}
                         <!-- - {{ item.user }} -->
                        <van-icon class="more" name="ellipsis" @click="show = true" />
                        <van-action-sheet v-model:show="show" @select="onSelect">
                            <div class="songCart">
                                <van-image width="40" height="40" :src="item.url" />&nbsp;&nbsp;
                                <span>歌单：{{ item.name }}</span>
                            </div>
                            <van-list>
                                <van-cell>
                                    <van-icon name="down" />&nbsp;&nbsp;&nbsp;下载
                                </van-cell>
                                <van-cell>
                                    <van-icon name="share-o" />&nbsp;&nbsp;&nbsp;分享
                                </van-cell>
                                <van-cell>
                                    <van-icon name="warning-o" />&nbsp;&nbsp;&nbsp;删除
                                </van-cell>
                            </van-list>
                        </van-action-sheet>
                    </van-cell>
                </van-list>
            </van-swipe-item>
        </van-swipe>

    </div>
</template>

<script setup lang="ts">
import { Dialog } from 'vant';
import { ref } from 'vue';
import { Toast } from 'vant';
import router from '@/router';
import {useuidStore} from '@/stores/user'
import { RequestUserSteet, RequestGetAndCancelSteet } from '@/api/homeFind';
const loading = ref(false)
const finished = ref(false)
const onClickLeft = () => history.back();
const show = ref(false);
const onSelect = (item: any) => {
    // 默认情况下点击选项时不会自动收起
    // 可以通过 close-on-click-action 属性开启自动收起
    show.value = false;
    Toast(item.name);
};
const toSteetDetail = (id: number) => {
    router.push({ path: '/mymusic/musiclist/' + id })
}
const show1 = ref(false);
const showPopup1 = () => {
    show1.value = true;
}
let fn1 = () => {
    Dialog.confirm({
        title: '警告',
        message:
            '是否删除',
    })
        .then(() => {
            console.log('1')
        })
        .catch(() => {
            console.log('-1')
        });
}

// cjh
const userStore = useuidStore()
let uid = userStore.uid
console.log(uid)
let userSteet = ref([])
let userGetSteet = ref([])
let userCreateSteet = ref([])
const toGetUserSteet = async (uid = 1640993585) => {
    // console.log(uid,'uid')
    let userSteetData = await RequestUserSteet(uid)
    // console.log('userSteetData>>>',userSteetData)
    const { code, playlist } = userSteetData.data
    // console.log(code, playlist)
    if (code == 200) {
        userSteet.value = playlist
        // console.log(userSteet.value)
        let res = userSteet.value.find((item, index) => {
            return item.creator.userId != uid
        })
        let getIndex = userSteet.value.indexOf(res, 0)
        console.log(res, getIndex)
        userGetSteet.value = userSteet.value.slice(0, getIndex)
        userCreateSteet.value = userSteet.value.slice(getIndex)
        console.log('userGetSteet.value', userGetSteet.value)
        console.log('userCreateSteet.value', userCreateSteet.value)
    }
}
toGetUserSteet(uid)
</script>

<style lang="scss" scoped>
.box {
    margin-bottom: 2.5rem;

    .songSteet {
        h2{
            font-size: 14px;
            box-sizing: border-box;
            padding: 0 16px;
        }
        .more {
            float: right;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        .songCart {
            height: 50px;
            padding: 5px 16px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #F1F3F4;
        }
    }
}
</style>